import React, { useState, useEffect, useCallback } from 'react'
import { postLsCarWhiteFindLsCarWhite, getLsCarWhiteDeleteLsCarWhite } from '../../api'
import SelectModules from './Components/SelectModules'
import AddWhiteListModule from './Components/AddWhiteListModule'
import { WhiteListListAll } from './style'
import { PageHeader, Button, message, Table, Space, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;
/**
 * @description: 白名单列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-05） 创建页面
 */

const WhiteListList = () => {
    const [listData, setListData] = useState([])
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [addWhiteListModuleShow, setAddWhiteListModuleShow] = useState(false)
    const [clickId, setClickId] = useState(undefined)
    const [tableLoading, setTableLoading] = useState(true)
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            setTableLoading(true);
            parames.state = 0;
            ; (async () => {
                const { code, msg, data } = await postLsCarWhiteFindLsCarWhite(parames)
                if (code === '20000') {
                    setPagingData({
                        currentPage: 1,
                        size: 10,
                        total: data.total
                    })
                    setListData(data.records)
                    setTableLoading(false)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //添加
    const handleAddWhiteList = () => {
        setAddWhiteListModuleShow(true)
    }
    //编辑
    const handleChangeWhiteList = id => {
        setClickId(id)
        setAddWhiteListModuleShow(true)
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size
        }
        listFun(parames);
    }
    //删除白名单
    const handleDelete = id => {
        confirm({
            title: '确定要删除当前信息吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getLsCarWhiteDeleteLsCarWhite({id})
                    if(code === '20000') {
                        message.success('删除成功！')
                        listFun()
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });
    }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '车主姓名',
            dataIndex: 'carMaster'
        },
        {
            title: '车牌号',
            dataIndex: 'carNo'
        },
        {
            title: '车主电话',
            dataIndex: 'mobile'
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                <Button 
                    type='primary' 
                    onClick = {() => handleChangeWhiteList(recode.id)}
                >编辑</Button>
                <Button 
                    type='primary' 
                    danger
                    onClick = {() => handleDelete(recode.id)}
                >删除</Button>
            </Space>
        }
    ];
    return <WhiteListListAll>
        <PageHeader
            className="site-page-header"
            title="白名单"
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddWhiteList()}>
                    添加白名单
                </Button>,
            ]}
        />
        <SelectModules />
        <Table 
            columns={columns} 
            dataSource={listData} 
            rowKey='id' 
            pagination={pagination} 
            loading = {tableLoading}
        />
        <AddWhiteListModule 
            addWhiteListModuleShow = {addWhiteListModuleShow}
            setAddWhiteListModuleShow = {setAddWhiteListModuleShow}
            listFun = {listFun}
            clickId = {clickId}
            setClickId = {setClickId}
        />
    </WhiteListListAll>
}

export default WhiteListList